<template>
  <div id="contentExamined">
    <h1 class="con-right-title">
      banner配置页
    </h1>
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:configure:add'"
        type="warning"
        icon="el-icon-plus"
        @click="handelAddEdit('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="80" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="名称"
        prop="name"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="描述"
        prop="description"
        min-width="110"
      ></el-table-column>
      <el-table-column label="频道" prop="channels" min-width="100">
        <template slot-scope="scope">
          {{ filterChannel(scope.row.channels) }}
        </template>
      </el-table-column>
      <el-table-column label="图片" width="80" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.imgInfo && scope.row.imgInfo.length > 0">
            <listImgString
              :imgInfo="scope.row.imgInfo"
              :showNum="false"
            ></listImgString>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="图片地址" prop="imgInfo" min-width="110">
        <template slot-scope="{ row }">
          <el-tooltip class="item" effect="dark" placement="top">
            <div style="max-width: 400px;" slot="content">
              {{ row.imgInfo }}
            </div>
            <div class="oneLine">
              {{ row.imgInfo }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      >
      <el-table-column label="显示终端" min-width="140" align="center">
        <template slot-scope="{ row }">
          <span v-for="(item, index) in row.terminals" :key="index"
            >{{ item | filterName('banner_terminal') }}
            <span
              v-if="
                row.terminals.length > 0 && index !== row.terminals.length - 1
              "
            >
              /
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="分组人群"
        min-width="140"
        prop="groupName"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.groupName ? row.groupName : '全部分组' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        min-width="140"
        prop="redirectType"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ filterType(row.terminals, row.redirectType) }}
        </template>
      </el-table-column>
      <el-table-column
        label="跳转链接"
        min-width="140"
        prop="redirectContent"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tooltip class="item" effect="dark" placement="top">
            <div style="max-width: 400px;" slot="content">
              {{ row.redirectContent }}
            </div>
            <div class="oneLine">
              {{ row.redirectContent }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="90">
        <template slot-scope="scope">
          <span
            v-if="scope.row.status"
            class="tag-span"
            :class="scope.row.status | filterClass('adPositionStatus')"
            >{{ scope.row.status | filterName('adPositionStatus') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="显示顺序"
        prop="sort"
        min-width="90"
      ></el-table-column>
      <el-table-column label="操作人" prop="status" min-width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.lastUser && scope.row.lastUser.userName">
            {{ scope.row.lastUser.userName }}</span
          >
          <span v-else>{{
            scope.row.createdUser && scope.row.createdUser.userName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdTime"
        min-width="160"
      ></el-table-column>
      <el-table-column
        label="最后修改时间"
        prop="lastModifiedTime"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ scope.row.lastModifiedTime | timeToTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:configure:enable'"
            v-if="scope.row.status === 'TEMPORARY'"
            type="text"
            @click="handelEnabled(scope.row)"
          >
            启用
          </el-button>
          <el-button
            v-permission="'wh:system:configure:edit'"
            v-if="scope.row.status === 'TEMPORARY'"
            type="text"
            @click="handelAddEdit('edit', scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            v-permission="'wh:system:configure:disabled'"
            v-if="
              scope.row.status === 'OPEN' || scope.row.status === 'TEMPORARY'
            "
            type="text"
            @click="handelClose(scope.row.id)"
          >
            关闭
          </el-button>
          <el-button
            v-permission="'wh:system:configure:copy'"
            v-if="scope.row.status === 'CLOSE'"
            type="text"
            @click="handelAddEdit('copy', scope.row.id)"
          >
            一键复制
          </el-button>
          <el-button
            v-permission="'wh:system:configure:remove'"
            v-if="scope.row.status === 'CLOSE'"
            type="text"
            @click="deleteWork(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!--添加弹窗 -->
    <addEditDialog
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></addEditDialog>
  </div>
</template>

<script>
import {
  getBannerList,
  delBanner,
  closeBanner,
  openBanner
} from '@/api/spaceConfiguration/bannerConfigure' // 接口
import listImgString from '@common/listImgString'
import topSearch from '@component/spaceConfiguration/bannerConfigure/topSearch' // 上部搜索条件
import { contentToStr } from '@utils/pubFunction'
import addEditDialog from '@component/spaceConfiguration/bannerConfigure/addEditDialog' // 添加弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'page',
  msg: '',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addEditDialog,
    listImgString
  },
  data() {
    return {
      loading: false,
      total: 0, // 搜索条件
      formInline: {
        status: '', // 状态
        name: '', // 名称
        sort: '',
        channels: '',
        terminals: ''
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      multipleSelection: [],
      powerStr: 'system:configure:list', // 是否查询的标识
      powerAry: [], // 可显示的权限
      canShowPage: false, // 是否显示当前页面
      // 表格数据
      tableData: [],
      dialogData: {
        isShow: false, // 默认隐藏
        id: '', // 默认新增
        type: 'add' // 默认新增
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  async mounted() {
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
    /* 字典 显示终端 */
    await sysNormalDisable('banner_terminal', 'banner_terminal')
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          return false
        }
        // this.searchList()
      })
    },
    //返回频道
    filterChannel(ary) {
      let str = ''
      let _this = this
      console.log()
      ary.forEach((item) => {
        str += _this.$options.filters.filterName(item, 'channelsStatus') + '/'
      })
      str = str.substr(0, str.length - 1)
      return str
    },
    /*返回类型*/
    filterType(terminals, type) {
      let str = ''
      if (terminals && terminals.length === 1 && terminals[0] === 'APP') {
        switch (type) {
          case 'POST_ID':
            str = '帖子ID'
            break
          case 'URL':
            str = '链接'
            break
          case 'XCX':
            str = '小程序'
            break
          case 'LABEL_ID':
            str = '标签ID'
            break
        }
      }
      return str
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      const params = {}
      Object.keys(this.formInline).forEach((key) => {
        if (this.formInline[key] !== '') {
          params[key] = this.formInline[key]
        }
      })
      let obj = Object.assign({}, this.searchParams, params)
      getBannerList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    // 添加开屏广告
    handelAddEdit(type, params = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.id = params
    },
    handelClose(id) {
      closeBanner(
        id,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 启用
    handelEnabled(row) {
      openBanner(
        row.id,
        (response) => {
          this.$message({
            type: 'success',
            message: '已启用'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    deleteWork(id) {
      this.$confirm('确定删除此banner吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delBanner(
            id,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less">
#contentExamined {
  @import url('~@common/style/imgBox.less');
  .oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
